<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>






<script type="text/javascript">
$(document).ready(function() {
		refreshTable();
		$('.digitsOnly').mask('0000000000', {reverse: true});	
		$("#createDate").datepicker({
			dateFormat : "dd/mm/yy",
			showAnim : "slide"
		}); 
		$("#btnSearch").click(function() {
			//alert('btnSearch');
			$('.required').unValidate();
			refreshTable(true);
		});
		$("#btnClear").click(function() {
			clear();
		});		
		function refreshTable(isSearch) {
			$('#example').dataTable(
					{
						"bDestroy" : true,
						"bProcessing" : true,
						"bServerSide" : true,
						"bLengthChange" : false,
						"bFilter" : false,
						"bSort" : false,
						"bInfo" : true,
						"bAutoWidth" : false,
						"bJQueryUI" : false,
						"iDisplayLength" : 10,
						"iSortingCols" : 0,
						"sPaginationType" : "bootstrap",
						"sAjaxSource" : "../cs/search",
						"fnServerParams" : function(aoData) {
							aoData.push({
										"name" : "costSheetModel.projectId",
										"value" : (isSearch != undefined || isSearch == true) ? $('#projectId').val() : ''
										},
										{
											"name" : "costSheetModel.projectName",
											"value" : (isSearch != undefined || isSearch == true) ? $('#projectName').val() : ''
										},
										{
											"name" : "costSheetModel.accSiteModel.accountName",
											"value" : (isSearch != undefined || isSearch == true) ? $('#accountName').val() : ''
										},										
										{
											"name" : "costSheetModel.createDate",
											"value" : (isSearch != undefined || isSearch == true) ? $('#createDate').val() : ''
										},										
										{
											"name" : "costSheetModel.departmentModel.code",
											"value" : (isSearch != undefined || isSearch == true) ? $('#code').val() : ''
										}									
							);
						},
						"fnRowCallback" : function(nRow, aData, iDisplayIndex) {
							$('td:eq(0)', nRow).html(
									'<input type="checkbox" name="keyDeletes" id="keyDeletes" value="' + aData.id + '" />');
							$('td:eq(3)', nRow).html(
									'<a href="../cs/get?costSheetModel.id='+aData.id+'">'
									+ aData.projectName + '</a>');
						},
						"aoColumns" : [ {
							"mData" : null,
							"sClass" : "center"
						}, {
							"mData" : "id",
							"sClass" : "center"
						}, {
							"mData" : "projectId",
							"sClass" : "center"							
						}, {
							"mData" : "projectName",
							"sClass" : "left"
						}, {
							"mData" : "accSiteModel.accountName",
							"sClass" : "left"	
						}, {
							"mData" : "createDate",
							"sClass" : "center"	
						}, {
							"mData" : "qty",
							"sClass" : "center"	
						}, {
							"mData" : "price",
							"sClass" : "center"	
						}, {
							"mData" : "total",
							"sClass" : "center"			
						}, {
							"mData" : "departmentModel.name",
							"sClass" : "left"	
						}, {
							"mData" : "name",
							"sClass" : "left"								
						} ]
					});
		}
		$("#btnDelete").easyconfirm({
			locale : {
				width : 220,
				title : 'Confirmation',
				text : '  ต้องการลบข้อมูล ?  ',
				button : [ 'No', 'Yes' ]
			}
		});

		$("#btnDelete").click(function() {
			var data = $('#costSheetModel :input[type=checkbox][id=keyDeletes]').checkboxIdValues();
			$.ajax({
				type : 'POST',
				url : '../cs/delete',
				dataType : 'json',
				data : data,
				success : function(json) {
					if (json.status == 'OK') {
						refreshTable();
						$("<div>ลบข้อมูลเรียบร้อย</div>").message();
					}
				}
			});
		});		
});	
function clear(){
	$("input#id").clear();
	$("input#projectId").clear();
	$("input#projectName").clear();
	$("input#accountName").clear();
	$("#createDate").clearDate();
	$("#code").clear();
}
</script>
<div id="container">
			<form name="costSheetModel" id="costSheetModel">
	<div id="content">
		<div class="warpper">
			<table class="from" cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
				<tr>
					<td colspan="9" class="header2" style="border-bottom: 1px #bbb solid;">ค้นหา</td>
				</tr>
			</table>
			<table class="from" cellpadding="0" cellspacing="0" border="1" style="width: 100%;">
				<tr>
					<td width="100px;" class="header">Project ID </td>
					<td width="100px;">
					<s:textfield id="projectId" name="projectId" cssStyle="width:100px;"/>
					<input type="hidden" id="id" />
					</td>
					<td width="100px;" class="header">Account name </td>
					<td width="100px;" colspan="3">
						<s:textfield id="accountName" name="accountName" cssStyle="width:250px;"/>
					</td>

				</tr>
				<tr>
					<td width="100px;" class="header">Project Name </td>
					<td width="100px;">
						<s:textfield id="projectName" name="projectName" cssStyle="width:250px;"/>
					</td>
					<td width="80px;" class="header">Date </td>
					<td width="100px;">
						<s:textfield name="createDate" id="createDate" size="8" maxlength="10" cssStyle="width:90px;"/>
					</td>
					<td width="80px;" class="header">แผนก </td>
					<td width="100px;">
						<s:select headerKey=""
						headerValue="--กรุณาเลือก--" id='code'
						name="code" list="departmentList"
						listKey="code" listValue="name"
						style="width: 210px;" />
					</select>
					</td>
				</tr>
				<tr>
					<td colspan="9" align="right" style="border-bottom: 1px #bbb solid; padding-bottom: 10px;">
					<a href="#" class="button" id="btnSearch"> Search </a> &nbsp; <a href="#" class="button" id="btnClear"> Clear </a></td>
				</tr>
			</table>
			<div style="width: 100%; height: 30px; text-align: center;" class="header2">รายการ Cost Sheet</div>
			<div style="width: 100%;">
				<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
					<thead>
						<tr>
							<th><input type="checkbox" name="checkAll" id="checkAll" value="checkbox" /></th>
							<th>ลำดับที่</th>
							<th>Project No.</th>
							<th>Project Name</th>
							<th>Account Name</th>
							<th>Date</th>
							<th>Qty.</th>
							<th>Price</th>
							<th>Total</th>
							<th>แผนก</th>
							<th>Name</th>

						</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
			</div>
			<div style="width: 100%; text-align: center; padding-top: 60px;">
				<table class="from" cellpadding="0" cellspacing="0" border="0" style="width: auto;">
					<tr>
						<td><a href="../cs/addcs" class="button" style="width: 130px;"> เพิ่มข้อมูล Cost Sheet</a></td>
						<td><a href="#" class="button"> Export </a></td>
						<td><a href="javascript:void(0);" class="button" id="btnDelete"> ลบข้อมูล </a></td>
					</tr>
				</table>
			</div>
		</div>
	</div>
	</form>
</div>
